//登录页面
import React, { PureComponent } from 'react';
import { Input, Button, message } from 'antd';
//调用 api
import { getSmsCode, login } from '../../api/user';
import "./index.scss";
class Login extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            phone: "",//电话号码
            smsCode: "",//验证码
            disabled: false, //false 可以点击的  true  置灰的
            btnText: "获取验证码" //验证码发送按钮的文字

        }
        this.timer = null;
    }
    //接收input框中的数据
    changeInput = (ev) => {
        console.log(ev.target.value);
        this.setState({
            [ev.target.name]: ev.target.value
        })
    }
    getSmsCode = () => {
        console.log("获取验证码");
        //验证 是否为空
        const reg = /\S/;//不是空白符
        //验证 是否格式正确
        const reg1 = /^1[3,4,5,6,7,8,9]\d{9}$/;
        const phone = this.state.phone.trim();
        if (!reg.test(phone)) {
            message.error("请输入手机号");
        } else if (!reg1.test(phone)) {
            message.error("输入的手机号格式不正确");
        } else {
            console.log("调用 获取验证码的接口");
            //调用 创建 验证码的接口
            getSmsCode(phone).then(res => {
                console.log(res);
                if (!res.code) {//验证码发送成功
                    //按钮需要置灰
                    this.setState({ disabled: true })
                    //显示提示
                    message.info("验证码已经发送到您的手机，请注意查收");
                    //倒计时
                    let num = 60;
                    this.timer = setInterval(() => {
                        num--;
                        this.setState({ btnText: `重新获取(${num}s)` });
                        if (num <= 0) {
                            clearInterval(this.timer);
                            this.setState({
                                btnText: "重新获取",
                                disabled: false
                            })
                        }
                    }, 1000);
                } else {//验证码发送失败
                    message.error("验证码错误");
                }
            })
        }
    }
    LoginFun = () => {
        //获取手机号码和验证码
        const phone = this.state.phone.trim();
        const smsCode = this.state.smsCode.trim();
        //验证 是否为空
        const reg = /\S/;//不是空白符
        //验证 是否格式正确
        const reg1 = /^1[3,4,5,6,7,8,9]\d{9}$/;
        const reg2 = /^\d{4}$/;
        if (!reg.test(phone)) {
            message.error("请输入手机号");
        } else if (!reg1.test(phone)) {
            message.error("输入的手机号格式不正确");
        } else if (!reg.test(smsCode)) {
            message.error("请输入验证码");
        } else if (!reg2.test(smsCode)) {
            message.error("输入的验证码格式不正确");
        } else {
            console.log("登录接口");
            login({ phone: phone, smsCode: smsCode }).then(res => {
                console.log(res);
                if (res.data.code === 1) {//登录失败
                    message.error(res.data.msg);
                } else {//登录成功了
                    //保存到 localStorage
                    localStorage.setItem("token", res.data.data.token);
                    localStorage.setItem("username", res.data.data.user.usermname);
                    //跳转到 用户中心页面
                    this.props.history.push("/main");
                }
            })
        }
    }
    componentWillUnmount() {
        //页面卸载前清除定时器
        clearInterval(this.timer);
    }
    render() {
        const { phone, smsCode, disabled, btnText } = this.state;
        return (<div className="login_con">
            <div>
                <Input placeholder="输入手机号" value={phone} name="phone" onInput={this.changeInput} />
            </div>
            <div>
                <Input placeholder="输入验证码" value={smsCode} name="smsCode" onInput={this.changeInput} className="sms_input" />
                <Button type="primary" onClick={this.getSmsCode} className="sms_button"
                    disabled={disabled}
                >{btnText}</Button>
            </div>
            <div>
                <Button type="primary" onClick={this.LoginFun} className="login_button">登录/注册</Button>
            </div>

        </div>);
    }
}

export default Login;